<script setup>
import { ref, reactive } from "vue";
import { getSubjectList } from "@/hooks/subject";

// 请求参数
const queryData = reactive({
  page: 1,
  limit: 10,
  subject_id: "",
  directory_id: "",
  tag_id: "",
  difficulty: "",
  quest_type: "",
  is_true_question: "",
  show_state: "",
  check_state: "",
  create_name: "",
  create_time: "",
});

// 获取学科下拉数据
const subjectOptions = getSubjectList();

// 学科选择获取目录下拉数据
const directoryOptions = ref([]);
const handlerSubjectChange = (val) => {
  subjectOptions.value.forEach((item, index) => {
    if (item.id === val) directoryOptions.value = item.children;
  });                                                      
};
</script>
<template>
  <el-card>
    <searchHeader>
      <template #search>
        <el-form :model="queryData" ref="form" label-width="80px" inline>
          <el-form-item label="学科名称">
            <el-select
              v-model="queryData.subject_id"
              placeholder="请选择"
              @change="handlerSubjectChange"
            >
              <el-option
                v-for="item in subjectOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="目录名称">
            <el-select v-model="queryData.directory_id" placeholder="请选择">
              <el-option
                v-for="item in directoryOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </template>
    </searchHeader>
  </el-card>
</template>



<style lang="scss" scoped>
</style>